<template>
	<div class="home">
		<div class="container">
			<backLast @backLast="back" />

			<div class="fruitInfo">
				<div class="leftBox">
					<div class="bigImg">
						<!-- <img
              src="../../assets/img/tao.png"
              alt=""
            > -->
						<pic-zoom :url="imgSrc" :scale="2" />
					</div>
					<div class="smallImg">
						<img src="../../assets/img/left_arrow.png" alt="" class="moveImg" @click="leftScroll">
						<div class="smBox">
							<ul :style="{ left: left }" class="smImgList">
								<li v-for="(item, index) in goodsInfo.lsAlbums" :key="item.id"
									:class="{ active: selectedImgIndex == index }" @mouseover="setActive(index)">
									<img :src="item.cFolder" alt="">
								</li>
							</ul>
						</div>
						<img src="../../assets/img/right_arrow.png" alt="" class="moveImg" @click="rightScroll">
					</div>
				</div>
				<div class="rightBox">
					<div class="toper">
						<div class="titles">
							{{ goodsInfo.cProductShowName }}
						</div>
						<div class="opreate">
							<div @click="focus(goodsInfo)">
								<img :src="goodsInfo.isChecked ? guanzhu : notguanzhu" alt="">
								关注
							</div>
							<div v-clipboard:copy="message" v-clipboard:success="onCopy" v-clipboard:error="onError">
								<img src="../../assets/img/fenxiang.png" alt="">
								分享
							</div>
						</div>
					</div>
					<div v-if="goodsInfo.productPreferential == undefined" :class="
              goodsInfo.groupBuying !== undefined?'priceBox_Bg': 
              WithPackageStatus === true? 'priceBox_Bg': 
              SinglePromotionStatus === true? 'priceBox_Bg':
              goodsInfo.promotion !== undefined?'priceBox_Bg':
              GiftpreFerentialStatus === true? 'priceBox_Bg':
              FixedSetMenuStatus === true? 'priceBox_Bg':
              CombinaTionSales === true? 'priceBox_Bg':
              'priceBox'
            ">
						<!-- 团购活动 -->
						<div v-if="goodsInfo.groupBuying !== undefined" class="body">
							<div class="active_name">
								{{ goodsInfo.groupBuying.name }}
							</div>
							<div class="active_titem">
								距结束
								<DetailtimeDown :start="goodsInfo.groupBuying.startTime"
									:end="goodsInfo.groupBuying.endTime" />
							</div>
						</div>
						<!-- 团购活动END -->

						<!-- 秒杀活动 -->
						<div v-if="goodsInfo.promotion !== undefined" class="body">
							<div class="active_name">
								{{ goodsInfo.promotion.sDesName }}
							</div>
							<div class="active_titem">
								距结束
								<DetailtimeDown :start="goodsInfo.promotion.pStartDate"
									:end="goodsInfo.promotion.pEndDate" />
							</div>
						</div>
						<!-- 秒杀活动END -->

						<!-- 搭配销售/搭配套餐 -->
						<div v-if="WithPackageStatus === true" class="body">
							<div class="active_name">
								{{ WithPackageList[0].name }}
							</div>
							<div class="active_titem" />
						</div>
						<!--搭配销售/搭配套餐END -->

						<!-- 整单促销 -->
						<div v-if="SinglePromotionStatus === true" class="body">
							<div class="active_name">
								{{ SinglePromotionList[0].pricePreferentialName }}
							</div>
							<div class="active_titem" />
						</div>
						<!-- 整单促销END -->

						<!-- 买赠活动 -->
						<div v-if="GiftpreFerentialStatus === true" class="body">
							<div class="active_name">
								{{ GiftpreFerentialList[0].giftPreferentialName }}
							</div>
							<div class="active_titem" />
						</div>
						<!-- 买赠活动END -->

						<!-- 固定销售/固定套餐 -->
						<div v-if="FixedSetMenuStatus === true" class="body">
							<div class="active_name">
								{{ FixedSetMenuList[0].name }}
							</div>
							<div class="active_titem" />
						</div>
						<!--固定销售/固定套餐END -->
						<!-- 选配套餐 -->
						<div v-if="CombinaTionSales === true" class="body">
							<div class="active_name">
								{{ goodsInfo.combinationSales[0].name }}
							</div>
							<div class="active_titem" />
						</div>
						<!-- 选配套餐END -->
						<div class="top">
							<div class="price">
								<span>¥</span>
								{{ goodsInfo.fSalePrice }}
								<span class="fMarkPrice">¥{{ goodsInfo.fMarkPrice }}</span>
								<span v-if="goodsInfo.productAttribute == 2"
									class="socre">+{{ goodsInfo.salePoints.toFixed(2) }}积分</span>
									<span class="moneybox" v-if="goodsInfo.enableDeposit">预付定金：<span class="orderMoney">{{goodsInfo.deposits}}</span></span>
							</div>
							<div class="lInventoryCount">
								仅剩{{ goodsInfo.lInventoryCount }}{{ goodsInfo.stockUnit_name }}
							</div>
						</div>
					</div>
					<div class="hr" />
					<!-- 数量 -->
					<div class="nums">
						<div class="tips">
							数量
						</div>
						<div class="numsGroup">
							<div class="lbtns" @click="reduceNums">
								-
							</div>
							<input v-model="nums" class="numbers" @change="numsChange">
							<div class="rbtns" @click="addNums">
								+
							</div>
						</div>
					</div>
					<!-- 数量END -->
					<!-- 规格 -->
					<div v-if="goodsInfo.lsProductSkus.length > 1">
						<div class="promotion_box">
							<div class="un_anbox" style="display: flex;justify-content: left">
								<div class="title" style="white-space: nowrap;">
									{{ goodsInfo.lsProductSkus[0].centerValuesNotExists.freeidx1_Name }}
								</div>
								<div class="un_anbody" style=" display: flex;flex-wrap: wrap;flex-direction: inherit; margin-left: 1rem;">
									<div v-for="(sku,skuindex) in goodsInfo.lsProductSkus" :key="skuindex"
										class="un_anbody_item" style="flex-direction: row;">
										<span class="active_span_sku" :class="skuindex === SkuTabIndex?'skuactive':''"
											@click="SkuTabClick(skuindex, sku)">{{ sku.centerValuesNotExists.freex1 }}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 规格END -->
					<!-- 促销及整单促销 -->
					<div v-if="goodsInfo.preferentialMap !== undefined">
						<!-- 促销 -->
						<div v-if="!SinglePromotionStatus" class="promotion_box">
							<div v-if="!PackageActivityStatus" class="un_anbox">
								<div class="title">
									促销
								</div>
								<div class="un_anbody">
									<div v-if="goodsInfo.preferentialMap.postlistMap.length !== 0">
										<div v-for="(item,index) in goodsInfo.preferentialMap.postlistMap" :key="index"
											class="un_anbody_item">
											<span class="active_span">包邮活动</span>
											<span>{{ item.postActivityName }}</span>
										</div>
									</div>
									<div v-else>
										<div v-for="(item,index) in goodsInfo.preferentialMap.postPartProductList"
											:key="index" class="un_anbody_item">
											<span class="active_span">包邮活动</span>
											<span>{{ item.DeliveryType }}</span>
										</div>
									</div>
								</div>
								<div class="an_butotn" @click="PackageActivity">
									展开>>
								</div>
							</div>
							<div v-else class="un_anbox">
								<div class="title">
									促销
								</div>
								<div class="un_anbody">
									<div v-for="(item,index) in goodsInfo.preferentialMap.postlistMap" :key="index"
										class="un_anbody_item">
										<span class="active_span">包邮活动</span>
										<span>{{ item.postActivityName }}</span>
									</div>

									<div v-for="(item,index) in goodsInfo.preferentialMap.giftpreferentialList"
										:key="index" class="an_anbody_item">
										<div class="top">
											<span class="active_span">{{ item.iGiftType }}</span>
											<span class="active_title">{{ item.giftPreferentialName }}</span>
											<span class="active_timer">截至日期：{{ item.endDate }}</span>
										</div>
										<div class="list">
											<div v-for="(item2,index2) in item.giftpreferentialItemList" :key="index2"
												class="list_itme">
												<div v-for="(i,j) in item2.giftPreferentialItem" :key="j" class="item">
													<span class="zanw" />
													{{ i.description }}
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="an_butotn" @click="PackageActivity">
									收起>>
								</div>
							</div>
						</div>
						<!-- 促销END -->
						<div v-else class="promotion_box">
							<div v-if="!PackageActivityStatus" class="un_anbox">
								<div class="title">
									促销
								</div>
								<div class="un_anbody">
									<div v-for="(item,index) in goodsInfo.preferentialMap.postlistMap" :key="index"
										class="un_anbody_item">
										<span class="active_span">包邮活动</span>
										<span>{{ item.postActivityName }}</span>
									</div>
									<div v-for="(singleitem,singleindex) in SinglePromotionList" :key="singleindex"
										class="un_anbody_item">
										<span class="active_span">{{ singleitem.pricePreferentialName }}</span>
										<span v-for="(i,j) in singleitem.pricePreferentialItemList" :key="j">
											满{{ i.consumerSpending }},且满{{ i.consumerPieces }}件，打{{ i.discountNum }}折
										</span>
									</div>
								</div>
								<div class="an_butotn" @click="PackageActivity">
									展开>>
								</div>
							</div>
							<div v-else class="un_anbox">
								<div class="title">
									促销
								</div>
								<div class="un_anbody">
									<div v-for="(item,index) in goodsInfo.preferentialMap.postlistMap" :key="index"
										class="un_anbody_item">
										<span class="active_span">包邮活动</span>
										<span>{{ item.postActivityName }}</span>
									</div>
									<div v-for="(item,index) in goodsInfo.preferentialMap.giftpreferentialList"
										:key="index" class="an_anbody_item">
										<div class="top">
											<span class="active_span">{{ item.iGiftType }}</span>
											<span class="active_title">{{ item.giftPreferentialName }}</span>
											<span class="active_timer">截至日期：{{ item.endDate }}</span>
										</div>
										<div class="list">
											<div v-for="(item2,index2) in item.giftpreferentialItemList" :key="index2"
												class="list_itme">
												<div v-for="(i,j) in item2.giftPreferentialItem" :key="j" class="item">
													<span class="zanw" />
													{{ i.description }}
												</div>
											</div>
										</div>
									</div>

									<div v-for="(a,b) in SinglePromotionList" :key="b" class="un_anbody_item">
										<span class="active_span">{{ a.pricePreferentialName }}</span>
										<span v-for="(i,j) in a.pricePreferentialItemList" :key="j">
											满{{ i.consumerSpending }},且满{{ i.consumerPieces }}件，打{{ i.discountNum }}折
											<span v-for="(c,d) in SinglePromotionList" :key="d" class="active_timer"
												style="margin-left: 1rem">截至日期：{{ c.endDate }}</span>
										</span>
									</div>
								</div>
								<div class="an_butotn" @click="PackageActivity">
									收起>>
								</div>
							</div>
						</div>
						<!-- 整单促销 -->
					</div>
					<!-- 促销及整单促销END -->
					<!-- 团购 -->
					<div v-if="goodsInfo.groupBuying !== undefined" class="promotion_box">
						<div class="un_anbox">
							<div class="title">
								团购
							</div>
							<div class="un_anbody">
								<div class="un_anbody_item">
									<span class="active_span">{{ goodsInfo.groupBuying.name }}</span>
									<span>{{ goodsInfo.groupBuying.totalLimitQuantity }}{{ goodsInfo.unit_name }}成团</span>
								</div>
							</div>
							<div class="an_butotn" />
						</div>
						<div class="progress_box">
							<el-progress
								:percentage="((goodsInfo.groupBuying.groupBuyingRate / goodsInfo.lInventoryCount) * 100).toFixed(0)"
								color="#fb4e7d" />
						</div>
					</div>
					<!-- 团购END -->
					<!-- 加入购物车 -->
					<div v-if="CombinaTionSales === false" class="btnGroup" >
						<div class="joinCart" @click="addCart" :class="goodsInfo.enableDeposit?'gray':''">
							加入购物车
						</div>
						<div class="buy" @click="nowBuy">
							立即购买
						</div>
					</div>

					<div v-else class="btnGroup">
						<div class="buy">
							<!-- @click="returnTop" -->
							<!-- <a 
                href="#CombinaTionSales_box"
                style="width: 29.19rem;display: flex;text-align: center;justify-content: center;"
              > -->
							选配套餐
							<!-- </a> -->
						</div>
					</div>
					<!-- 加入购物车END -->
					<div class="goosTips">
						<div>·温馨提示：不支持7天无理由退货</div>
						<div>·由INJA商城发货，并提供售后服务</div>
					</div>
				</div>
			</div>
			<!-- 搭配套餐选项  -->
			<div v-show="WithPackageStatus" id="WithPackage_box">
				<div class="topp_box">
					<span>搭配套餐</span>
				</div>
				<el-tabs v-model="WithPackageName" type="card" @tab-click="WithPackagHandleClick">
					<el-tab-pane v-for="(withItem, withIndex) in WithPackageList" :key="withIndex"
						:label="withItem.name" :name="`${(Number(withIndex) + 1)}`" class="topp_body">
						<div class="list_box">
							<div class="detail_good_box">
								<el-image class="detail_good_box_img" :src="goodsInfo.fullDefaultImageUrl" fit="cover"
									@click="LocckGoodsShow(goodsInfo.id, goodsInfo.iShopId)" />
								<div class="detail_good_box_name">
									{{ goodsInfo.cName }}
								</div>
							</div>
							<el-checkbox-group v-model="CombinCheckList" fill="red" class="checkbox-group"
								@change="CheckListChange">
								<div v-for="(combin, combinIndex) in withItem.combinProducts" :key="combinIndex"
									class="topp_body_item">
									<div class="plus_sign">
										+
									</div>
									<div class="topp_body_item_body">
										<el-image class="topp_body_img" :src="combin.productPicUrl" fit="cover"
											@click="LocckGoodsShow(combin.productId, combin.iShopId)" />
										<div class="topp_body_name">
											{{ combin.productName }}
										</div>

										<div class="topp_body_price">
											<el-checkbox :key="combin.productId" :label="combin">
												<span>¥{{ combin.newPrice }}</span>
											</el-checkbox>
										</div>
									</div>
								</div>
							</el-checkbox-group>
							<div class="plus_sign">
								=
							</div>
							<div class="topp_body_item_settlement">
								<div class="topp_body_item_settlement_1">
									已经选择了{{ CombinNum }}个配件
								</div>
								<div class="topp_body_item_settlement_2">
									搭配价：¥{{ WithPackagePrice }}
								</div>
								<div class="topp_body_item_settlement_4">
									<span>节省：¥{{ WithPackagePrice2 }}</span>
								</div>
								<div class="topp_body_item_settlement_3">
									<span @click="CombinAddCart(withItem.id)">加入购物车</span>
								</div>
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
			<!-- 搭配套餐选项END  -->

			<!-- 固定套餐选项  -->
			<div v-show="FixedSetMenuStatus" id="WithPackage_box">
				<div class="topp_box">
					<span>固定套餐</span>
				</div>
				<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
					<el-tab-pane v-for="(fixedItem, fixedIndex) in FixedSetMenuList" :key="fixedItem.id"
						:label="fixedItem.name" :name="`${(Number(fixedIndex) + 1)}`" class="topp_body">
						<div class="list_box">
							<div class="detail_good_box">
								<el-image class="detail_good_box_img" :src="fixedItem.combinProducts[0].productPicUrl"
									fit="cover" @click="LocckGoodsShow(goodsInfo.id, goodsInfo.iShopId)" />
								<div class="detail_good_box_name">
									{{ fixedItem.combinProducts[0].productName }}
								</div>
								<div class="detail_good_box_price">
									<span>¥{{ fixedItem.combinProducts[0].FavorablePrice }}</span>
								</div>
							</div>
							<div v-for="(fixcombin, fixcombinIndex) in fixedItem.combinProducts.slice(1)"
								:key="fixcombinIndex" class="topp_body_item">
								<div class="plus_sign">
									+
								</div>
								<div class="topp_body_item_body">
									<el-image class="topp_body_img" :src="fixcombin.productPicUrl" fit="cover"
										@click="LocckGoodsShow(fixcombin.productId, fixcombin.iShopId)" />
									<div class="topp_body_name">
										{{ fixcombin.productName }}
									</div>

									<div class="topp_body_price">
										<span>¥{{ fixcombin.FavorablePrice }}</span>
									</div>
								</div>
							</div>
							<div class="plus_sign">
								=
							</div>
							<div class="topp_body_item_settlement">
								<div class="topp_body_item_settlement_2">
									搭配价：¥{{ FavorablePrice }}
								</div>
								<div class="topp_body_item_settlement_4">
									<span>节省：¥{{ FavorablePrice2 }}</span>
								</div>
								<div class="topp_body_item_settlement_3">
									<span @click="FixedAddCart(fixedItem.combinProducts)">加入购物车</span>
								</div>
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
			<!-- 固定套餐选项END  -->

			<!-- 选配套餐选项  -->
			<div v-if="CombinaTionSales === true" id="CombinaTionSales_box">
				<div class="topp_box">
					<span>选配套餐</span>
				</div>
				<el-tabs v-model="combinaActive" type="card"
					@tab-click="CombinaHandleClick($event, goodsInfo.combinationSales[0].combinationSalesStrategy)">
					<el-tab-pane
						v-for="(CombinaItem, combinaIndex) in goodsInfo.combinationSales[0].combinationSalesStrategy"
						:key="combinaIndex" :label="CombinaItem.strategyItemName"
						:name="`${(Number(combinaIndex) + 1)}`" class="topp_body">
						<div class="list_box">
							<div class="detail_good_box">
								<el-image class="detail_good_box_img" :src="goodsInfo.fullDefaultImageUrl" fit="cover"
									@click="LocckGoodsShow(goodsInfo.id, goodsInfo.iShopId)" />
								<div class="detail_good_box_name">
									{{ goodsInfo.cName }}
								</div>
								<div class="detail_good_box_price">
									<span>¥{{ goodsInfo.fSalePrice }}</span>
								</div>
							</div>
							<el-checkbox-group v-model="ComCheckList" fill="red" class="checkbox-group"
								@change="ComListChange($event)">
								<div v-for="(Com, ComIndex) in CombinaItem.combinationsalesItem" :key="ComIndex"
									class="topp_body_item">
									<div class="plus_sign" />
									<div class="topp_body_item_body">
										<el-image class="topp_body_img" :src="Com.productPicUrl" fit="cover"
											@click="LocckGoodsShow(Com.productId, Com.iShopId)" />
										<div class="topp_body_name">
											{{ Com.productName }}
										</div>

										<div class="topp_body_price">
											<el-checkbox :key="ComIndex" :label="Com"
												:disabled="Com.SelectionState === true&&Com.NumsState === true">
												<span>¥{{ Com.price }}</span>
											</el-checkbox>
										</div>
										<!-- :disabled="Com.NumsState === true" -->
										<div class="topp_body_num">
											<el-input-number v-model="Com.nums" :max="Com.iProductNum" :min="1"
												:step-strictly="true" size="mini" :disabled="Com.NumsState === true"
												@change="handleChange($event, combinaActive, ComIndex,CombinaItem)" />
										</div>
									</div>
								</div>
							</el-checkbox-group>
						</div>
					</el-tab-pane>
					<div class="topp_box" style="margin-bottom:0">
						<span>已选商品</span>
					</div>
					<div class="activ_leist_box">
						<div class="detail_good_box">
							<el-image class="detail_good_box_img" :src="goodsInfo.fullDefaultImageUrl" fit="cover"
								@click="LocckGoodsShow(goodsInfo.id, goodsInfo.iShopId)" />
							<div class="detail_good_box_name">
								{{ goodsInfo.cName }}
							</div>
							<div class="detail_good_box_price">
								<span>¥{{ goodsInfo.fSalePrice }}</span>
							</div>
						</div>
						<div v-for="(lis, LiIndex) in CombinaActiveList" :key="LiIndex" class="consetrbox">
							<div v-for="(i, j) in lis.data" :key="j" class="topp_body_item">
								<div class="plus_sign">
									+
								</div>
								<div class="topp_body_item_body">
									<el-badge :value="num(i.nums, i)" :max="100" class="item">
										<el-image class="topp_body_img" :src="i.productPicUrl" fit="cover"
											@click="LocckGoodsShow(i.productId, i.iShopId)" />
									</el-badge>
									<div class="topp_body_name">
										{{ i.productName }}
									</div>

									<div class="topp_body_price">
										<span>¥{{ i.price }}</span>
									</div>
								</div>
							</div>
						</div>
						<div v-show="CombinaActiveList.length != 0" class="plus_sign" />
						<div v-show="CombinaActiveList.length != 0" class="topp_body_item_settlement">
							<div class="topp_body_item_settlement_2">
								<el-input-number v-model="NumberData" :min="1" :step-strictly="true" size="mini"
									@change="CombinaSetChange" />
							</div>
							<div class="op-button">
								<div class="topp_body_item_settlement_3">
									<span @click="CombinaSetBy">立即购买</span>
								</div>
								<div class="topp_body_item_settlement_3">
									<span @click="CombinaSetAddCart(combinaActive)">加入购物车</span>
								</div>
							</div>

						</div>
					</div>
				</el-tabs>
			</div>
			<!-- 选配套餐选项END  -->
		</div>
		<Carousel ref="CarouselRefs" :carousel-data="goodsInfo" @getNewDetail="getNewDetail" />
		<DetailType ref="DetailTypeRefs" :detail-type="goodsInfo" />
		<FoucsSuccess :visiable="isVisiable" @changeVisiabled="changeVisiabled" />
		<div class="shop" @click="link">
			<img src="../../assets/img/shop.png" alt="">
			客服
		</div>
		<!-- <ShareModal
      :visiable="isVisiableShare"
      @changeVisiabledShare="changeVisiabledShare"
    /> -->
	</div>
</template>

<script>
	import Carousel from '../../components/common/Carousel.vue';
	import DetailType from '../../components/common/detailType.vue';
	import backLast from '../../components/common/backLast.vue'
	import FoucsSuccess from '../../components/common/focusSuccess.vue'
	import PicZoom from 'vue-piczoom'
	import guanzhu from '../../assets/img/zan_selected.png'
	import notguanzhu from '../../assets/img/guanzhu.png'
	import DetailtimeDown from '../../components/shopindex/DetailtimeDown'
	export default {
		components: {
			Carousel,
			DetailType,
			backLast,
			PicZoom,
			FoucsSuccess,
			DetailtimeDown
			// ShareModal
		},
		data() {
			return {
				notguanzhu: notguanzhu,
				guanzhu: guanzhu,
				smImgList: [],
				skuInfo: [],
				nums: 1,
				selectedImgIndex: 0,
				imgSrc: '',
				isVisiable: false,
				isVisiableShare: false,
				id: "",
				iShopId: '',
				goodsInfo: {
					"productCouponMap": {},
					"iEnableWeigh": false,
					"realiEnableWeigh": false,
					"iEnableCustomized": false,
					"realProductAttribute": 1,
					"realProductAttributeType": 1,
					"virtualProductAttribute": 0,
					"productAttribute": 1,
					"virtualType": 0,
					"iShowSkuSaveStyle": 0,
					"cCode": "",
					"cName": "",
					"cProductShowName": "",
					"weight": 0,
					"iStatus": 1,
					"fMarkPrice": 0,
					"fSalePrice": 0,
					"fRetailPrice": 0,
					"salePoints": 0,
					"saleChannel": "2,3",
					"cERPCode": "",
					"oProductSub": {
						"cDescription": "",
						"mobileDescription": ""
					},
					"purchaseUnit_name": "",
					"purchaseRate": 1,
					"stockUnit_name": "",
					"stockRate": 1,
					"lInventoryCount": 100,
					"dlyFeeRuleId": 0,
					"iOpStatus": -1,
					"dCreateTime": "2021-03-25 10:40:01.000",
					"dUpdateTime": "2021-03-29 15:42:32.000",
					"dOnSaleTime": "2021-03-29 15:42:32.000",
					"iDeleted": 0,
					"iOrder": 0,
					"iSales": 0,
					"commentNum": 0,
					"unit_name": "",
					"oUnit_id": '',
					"fullDefaultImageUrl": "",
					"bRecommended": false,
					"lsProductSkus": [{}],
					"iUpCount": 0,
					"iDownCount": 0,
					"preferentialMap": {
						"giftpreferentialList": [],
						"postPartProductList": [],
						"postlistMap": [],
						"pricepreferentialList": []
					},
					"disabled": false,
					"isReservationServices": 0,
					"cOptionDlyType": "EMSANDPICKUP",
					"isStoreInventory": false,
					"isEmsDispatchPlan": false,
					"isDisplayPrice": true,
					"iShopId": '',
					"shop": {},
					"isAllArea": false,
					"isChecked": false,
					"enableDeposit": false,
					"enablemodifyDeposit": false,
					"depositPayType": 0,
					"depositDealPayType": 0,
					"depositPercentage": 0,
					"cCorpHotline": "",
					"iPlatFormStaus": 1,
					"cPlatFormRemark": "商家商品已设置为不需要审核就能上下架",
					"iInventoryQuantity": false,
					"iInventoryPrompt": false,
					"applyDistribute": true,
					"iEnableCyclePurchase": false,
					"iCreatorType": 0,
					"enableRetail": false,
					"isSaleInOfflineStore": true,
					"realisSaleInOfflineStore": false,
					"isOfflineStoreOrder": true,
					"realisOfflineStoreOrder": false,
					"isBatchManage": false,
					"isSerialNoManage": false,
					"isExpiryDateManage": false,
					"stopstatus": false,
					"expireDateUnit": 0,
					"expireDateNo": 0,
					"retailPriceDimension": 1,
					"isPriceChangeAllowed": false,
					"isOfflineStoreSelfMining": true,
					"isBatchAccounting": false,
					"isOfflineStoresReturn": true,
					"requireRate": 1,
					"iEnableEcontract": false,
					"bShopOwnOnly": true,
					"isProcess": false,
					"isMaterial": false,
					"canOrder": false,
					"onlyOrder": false,
					"bEnableSubscribe": false,
					"lsAlbums": [],
					"lsSpecItemAlbums": [],
					"lsAttachments": [],
					"lsProductParameters": [],
					"description": "",
					"mobileDescription": "",
					"maxPrice": 0,
					"lsProductProps": [],
					"lsSpecs": [],

				},
				skuItem: "",
				letfs: 0,
				left: 0,
				countDownList: '00天00时00分00秒',
				morenSalePrice: 0,
				message: location.href,
				product: [],
				ActiveType: '', // 页面类别 3 促销，
				FavorList: [], // 关注列表（查询该商品是否被关注）
				PackageActivityStatus: false, // 包邮活动展开状态 
				WithPackageList: [], // 搭配套餐
				SinglePromotionStatus: false, // 整单促销/促销状态， false 促销 true 整单促销
				SinglePromotionList: [], // 整单促销列表
				GiftpreFerentialStatus: false, // 买赠活动
				GiftpreFerentialList: [], // 买赠活动列表
				WithPackageStatus: false, // 是否有搭配套餐
				FixedSetMenuStatus: false, // 是否有固定套餐
				FixedSetMenuList: [], // 固定套餐列表
				GetFixedDetailList: [], // 选择固定套餐列表
				ComCheckList: [], // 选择选配列表
				CombinCheckList: [], // 选择的商品(搭配套餐)、搭配套餐列表
				CombinGetGoodDetailList: [], // 选择的商品详情（搭配套餐）
				CombinNum: 0,
				SkuTabIndex: 0, // 选配角标
				getEMSString: '', // 选配id存放
				activeName: '1', // 固定套餐默认选择
				FavorablePrice: 0, // 固定套餐价格
				FavorablePrice2: 0, // 固定套餐节省价格
				WithPackageName: '1', // 搭配套餐默认选择
				WithPackagePrice: 0, // 搭配套餐价格
				WithPackagePrice2: 0, // 搭配套餐节省价格
				CombinaTionSales: false, // 选配状态
				combinaActive: '1', // 选配套餐默认选择
				CombinaActiveList: [], // 选配套餐选择数组
				CombinaNumList: [], // 选配套餐计数器数组
				combinationSalesStrategyLst: [], // 选配tab每块数据
				RemainingNum: 0, // 每个tab剩余数量
				NumberData: 1,
			};
		},
		computed: {
			num() {
				return function(RemainingNum) {
					return RemainingNum
				}
			}
		},
		mounted() {
			this.id = this.$route.query.id;
			this.iShopId = this.$route.query.iShopId==0?'':this.$route.query.iShopId
			console.log('this.id', this.id, this.iShopId)
			this.getGoodDetail()
			// 搭配套餐
			this.GetCombinSaleListListData(this.$route.query.id||'', this.$route.query.iShopId||'')
			// 固定套餐
			this.GetFixedSetMenuListData(this.$route.query.id||'', this.$route.query.iShopId||'')
		},
		methods: {
			// 固定套餐选项
			handleClick(tab) {
				console.log('固定套餐选项', tab, tab.index, Number(tab.index))
				this.activeName = String(Number(tab.index) + 1)
				if (this.activeName === 0) {
					this.SmGDPrice(this.FixedSetMenuList, 1)
				} else {
					this.SmGDPrice(this.FixedSetMenuList, this.activeName)
				}
			},
			// 搭配套餐选项
			WithPackagHandleClick(tab) {
				console.log('搭配套餐选项', tab, tab.index, Number(tab.index))
				this.WithPackageName = String(Number(tab.index) + 1)
				this.CombinCheckList = [] // 选择的商品(搭配套餐)、搭配套餐列表
				this.CombinGetGoodDetailList = [], // 选择的商品详情（搭配套餐）
					this.WithPackagePrice = 0
				this.WithPackagePrice2 = 0
				this.CombinNum = 0
			},
			// 选配套餐选项
			CombinaHandleClick(tab, combinationSalesStrategy) {
				console.log('选配套餐选项', tab, combinationSalesStrategy)
				this.combinaActive = String(Number(tab.index) + 1) // 选配套餐默认选择
				console.log('this.combinaActive', this.combinaActive)
			},
			// 计算固定套餐价格
			SmGDPrice(FixedSetMenuList, index) {
				let FixedGoods = FixedSetMenuList[index - 1]
				let total = 0 // 优惠价合计
				let PriceTotal = 0 // 未优惠合计
				console.log('FixedGoods', FixedGoods)
				for (let g = 0; g < FixedGoods.combinProducts.length; g++) {
					total += FixedGoods.combinProducts[g].FavorablePrice
					PriceTotal += FixedGoods.combinProducts[g].price
				}
				this.FavorablePrice = (((total) * 100) / 100).toFixed(2)
				this.FavorablePrice2 = (((PriceTotal * 100) - (total * 100)) / 100).toFixed(2)
			},
			// 看详情
			LocckGoodsShow(id, iShopId) {
				console.log('看详情', id, iShopId)
				this.$router.push({
					path: "/fruit/detail_2",
					query: {
						id: id,
						iShopId: iShopId
					},
				})
			},
			// 包邮活动展开状态
			PackageActivity() {
				this.PackageActivityStatus = !this.PackageActivityStatus
			},
			setActive(index) {
				this.selectedImgIndex = index
				this.imgSrc = this.goodsInfo.lsAlbums[this.selectedImgIndex].cFolder
			},
			// 搭配套餐选择
			CheckListChange(val) {
				this.CombinNum = val.length // 已经选择了0个配件
				this.CombinCheckList = val
				// 获取搭配商品详情
				let NewGetGoodDetailList = []
				this.CombinCheckList.forEach(Element => {
					let params = {
						token: localStorage.getItem('token'),
						data: {
							id: Element.productId,
							iShopId: Element.iShopId,
						}
					}
					this.$api.good.getGoodDetail(params).then(res => {
						NewGetGoodDetailList.push(res.data)
						this.$set(res.data, 'bIsMain', Element.bIsMain)
						this.CombinGetGoodDetailList = NewGetGoodDetailList
						console.log('搭配套餐选择', this.CombinGetGoodDetailList)
					})
				})
				this.SmDPPrice()
			},
			// 选配选择
			ComListChange(e) {
				console.log('选配选择', e, "当前tab页", this.combinaActive, 'tab数据', this.combinationSalesStrategyLst)
				// 将选选择的数据根据Tabindex进行分组
				this.ComCheckList = e
				let arr = e
				let map = {}
				let DESRT = []
				for (var i = 0; i < arr.length; i++) {
					// this.$set(arr[i],"nums",1)
					let ai = arr[i];
					if (!map[ai.TabIndex]) {
						DESRT.push({
							TabIndex: ai.TabIndex,
							data: [ai],
							name: this.combinationSalesStrategyLst[this.combinaActive - 1]
								.strategyItemName,
							count: this.combinationSalesStrategyLst[this.combinaActive - 1].count
						});
						map[ai.TabIndex] = ai;
					} else {
						for (var j = 0; j < DESRT.length; j++) {
							var dj = DESRT[j];
							if (dj.TabIndex == ai.TabIndex) {
								dj.data.push(ai);
								break;
							}
						}
					}
				}
				this.CombinaActiveList = DESRT
				if (DESRT[Number(this.combinaActive) - 1]) {
					// 如果每个选配商品数量或1个tab页选择的数量等于CombinaItem.count规定数量，则相反的选择和数量计数器禁用
					if (DESRT[Number(this.combinaActive) - 1].TabIndex === this.combinaActive) {
						if (this.combinationSalesStrategyLst[Number(this.combinaActive) - 1].count === DESRT[
								Number(this
									.combinaActive) - 1].data.length) {
							console.log(`我选${this.combinaActive}完了`)
							let arr1 = this.combinationSalesStrategyLst[Number(this.combinaActive) - 1]
								.combinationsalesItem
							let arr2 = DESRT[Number(this.combinaActive) - 1].data
							let output = arr1.filter(item => !arr2.includes(item))
							// 开启所选商品计数器
							DESRT.forEach(NumsItem => {
								NumsItem.data.forEach(NumsI => {
									this.$set(NumsI, 'NumsState', true)
								})
							})
							output.forEach(Element => {
								this.$set(Element, 'SelectionState', true)

							})
						} else {
							let arr1 = this.combinationSalesStrategyLst[Number(this.combinaActive) - 1]
								.combinationsalesItem
							let arr2 = DESRT[Number(this.combinaActive) - 1].data
							let output = arr1.filter(item => !arr2.includes(item))
							// console.log('vava',DESRT, output, arr2)
							// 不满足选择条件，将未选择的商品选择重新打开
							console.log(`我${this.combinaActive}未选完`, DESRT, output, arr2)
							// 所选商品数量求和
							let elenum = 0
							DESRT.forEach(NumsItem => {
								NumsItem.data.forEach(NumsI => {
									elenum += NumsI.nums
									this.$set(NumsI, 'NumsState', false)
									this.$set(NumsItem, 'elenum', elenum)
									this.$set(NumsItem, 'remNum', Number(this
										.combinationSalesStrategyLst[
											Number(this.combinaActive) - 1].count) - (
										elenum - 1))
								})
							})
							if (this.combinationSalesStrategyLst[Number(this.combinaActive) - 1].count === DESRT[
									Number(
										this.combinaActive) - 1].elenum) {
								let arr1 = this.combinationSalesStrategyLst[Number(this.combinaActive) - 1]
									.combinationsalesItem
								let arr2 = DESRT[Number(this.combinaActive) - 1].data
								let output = arr1.filter(item => !arr2.includes(item))
								// 开启所选商品计数器
								DESRT.forEach(NumsItem => {
									NumsItem.data.forEach(NumsI => {
										this.$set(NumsI, 'NumsState', true)
									})
								})
								output.forEach(Element => {
									this.$set(Element, 'SelectionState', true)
								})
							} else {
								output.forEach(Element => {
									this.$set(Element, 'SelectionState', false)
									this.$set(Element, 'NumsState', true)
									this.$set(Element, 'nums', 1)
								})
								return false
							}
							output.forEach(Element => {
								this.$set(Element, 'SelectionState', false)
								this.$set(Element, 'NumsState', true)
								this.$set(Element, 'nums', 1)
							})
						}
					} else {
						this.combinationSalesStrategyLst[Number(this.combinaActive) - 1].combinationsalesItem
							.forEach(
								Element => {
									this.$set(Element, 'NumsState', true)
									this.$set(Element, 'nums', 1)
									this.$set(Element, 'SelectionState', false)
								})
						return false
					}
				} else {
					this.combinationSalesStrategyLst[Number(this.combinaActive) - 1].combinationsalesItem.forEach(
						Element => {
							this.$set(Element, 'NumsState', true)
							this.$set(Element, 'nums', 1)
							this.$set(Element, 'SelectionState', false)
						})
					return false
				}

			},
			// 选配计数器
			handleChange(currentValue, combinaActive) {

				console.log('acurrentValue, oldValue', currentValue)
				console.log('this.ComCheckList', this.ComCheckList, combinaActive)
				let arr = this.ComCheckList
				let map = {}
				let DESRT = []
				for (var i = 0; i < arr.length; i++) {
					let ai = arr[i];
					if (!map[ai.TabIndex]) {
						DESRT.push({
							TabIndex: ai.TabIndex,
							data: [ai],
							name: this.combinationSalesStrategyLst[this.combinaActive - 1]
								.strategyItemName,
							count: this.combinationSalesStrategyLst[this.combinaActive - 1].count
						});
						map[ai.TabIndex] = ai;
					} else {
						for (var j = 0; j < DESRT.length; j++) {
							var dj = DESRT[j];
							if (dj.TabIndex == ai.TabIndex) {
								dj.data.push(ai);
								break;
							}
						}
					}
				}
				console.log('handleChange', DESRT)
				this.CombinaActiveList = DESRT
				if (DESRT[Number(combinaActive) - 1]) {
					let xlType = DESRT.filter(function(obj) {
						return obj.TabIndex === combinaActive
					})
					// console.log('1111', xlType)
					xlType.forEach(Element => {
						let elenum = 0
						Element.data.forEach(i => {
							elenum += i.nums
						})
						this.$set(Element, 'elenum', elenum)
					})
					// 如果每个选配商品数量或1个tab页选择的数量等于CombinaItem.count规定数量，则相反的选择和数量计数器禁用
					if (DESRT[Number(this.combinaActive) - 1].TabIndex === this.combinaActive) {
						// console.log('as111', DESRT[Number(this.combinaActive)- 1])
						if (this.combinationSalesStrategyLst[Number(this.combinaActive) - 1].count === DESRT[
								Number(this
									.combinaActive) - 1].elenum) {
							console.log(`我选${this.combinaActive}完了`)
							let arr1 = this.combinationSalesStrategyLst[Number(this.combinaActive) - 1]
								.combinationsalesItem
							let arr2 = DESRT[Number(this.combinaActive) - 1].data
							let output = arr1.filter(item => !arr2.includes(item))
							console.log('我在这1', arr2)
							arr2.forEach(arrItem => {
								this.$set(arrItem, 'NumsState', true)
							})
							output.forEach(Element => {
								this.$set(Element, 'SelectionState', true)
							})
						} else {
							console.log(`我${this.combinaActive}未选完`)
							let arr1 = this.combinationSalesStrategyLst[Number(this.combinaActive) - 1]
								.combinationsalesItem
							let arr2 = DESRT[Number(this.combinaActive) - 1].data
							let output = arr1.filter(item => !arr2.includes(item))
							console.log('我在这2', output)
							output.forEach(Element => {
								this.$set(Element, 'RemainingNum', Number(this.combinationSalesStrategyLst[
									Number(
										this.combinaActive) - 1].count) - Number(DESRT[Number(this
									.combinaActive) - 1].elenum))
								this.$set(Element, 'SelectionState', false)
								this.$set(Element, 'NumsState', true)
								this.$set(Element, 'nums', 1)
							})

						}
					} else {
						console.log('222', DESRT[Number(this.combinaActive) - 1])
					}
				} else {
					this.combinationSalesStrategyLst[Number(this.combinaActive) - 1].combinationsalesItem.forEach(
						Element => {
							this.$set(Element, 'NumsState', true)
							this.$set(Element, 'nums', 1)
							this.$set(Element, 'SelectionState', false)
						})
					return false
				}
			},
			// 选配结算计数器
			CombinaSetChange(val) {
				console.log('选配结算计数器', val)
			},
			// 选配立即购买
			CombinaSetBy() {
				console.log('立即购买')

				let xlType = this.goodsInfo.combinationSales[0].combinationSalesStrategy

				console.log('1111', this.CombinaActiveList)

				for (var s = 0; s < xlType.length; s++) {
					let totals = 0
					if (this.CombinaActiveList[s]) {
						this.CombinaActiveList[s].data.forEach(d => {
							totals += d.nums
						})
					}
					console.log(xlType[s].count, totals)
					if (xlType[s].count > totals) {
						this.$message.error(
							`${xlType[s].strategyItemName}必须选够${xlType[s].count}件,已选${totals}件`
						);
						return
					}
				}

				let packageDetail = []
				this.CombinaActiveList.forEach(items => {

					items.data.forEach(item => {
						let temp = {
							iProductId: item.productId,
							iProductNum: item.nums,
							iQuantity: item.nums,
							iSKUId: item.iskuId,
							iShopId: item.iShopId || '',
							lPackagePId: this.goodsInfo.combinationSales[0].mainProductId,
							lPackageSkuId: this.skuItem,
							productId: item.productId,
							strategyId: item.strategyId
						}
						packageDetail.push(temp)
					})
				})


				let datas = {
					"iSKUId": this.skuItem,
					"iProductId": this.goodsInfo.id,
					"onLineOffLine": 0,
					"iQuantity": this.nums,
					"iShopId": this.goodsInfo.iShopId || null,
					bIsMain: true,
					fixedSale: 1,
					iPackageNum: this.NumberData,
					lPackageId: this.goodsInfo.combinationSales[0].id,
					saleType: this.goodsInfo.combinationSales[0].saleType,
					packageDetail: packageDetail
				}

				console.log(datas)

				let params = {
					token: localStorage.getItem("token"),
					data: {
						item: datas
					}
				}
				this.$api.good.orderNow(params).then(res => {
					console.log(res)
					if (res.code == 200) {
						let cardata = [{
							iSKUId: this.skuItem,
							iProductId: this.id,
							onLineOffLine: 0,
							iQuantity: this.nums,
							dlyType: this.getEMSString,
							id: res.data,
							iShopId: this.goodsInfo.iShopId || null
						}]
						let subdata = {
							items: cardata,
							realProductAttribute: 1,
							wayOfOrder: 1
						}
						let par = {
							token: localStorage.getItem("token"),
							data: subdata
						}
						this.$api.good.GenerateOrderByShoppingCarts(par).then(resq => {
							if (resq.code == 200) {
								this.$router.push({
									path: '/confirm_order'
								})
							} else {
								this.$message.error(resq.message)
							}
						})

					} else {
						this.$message.error(res.message)
					}
				})
				// let obj = {
				// 	"item": datas
				// }

				// this.$Request.post(this.$api.httpApi.goods.orderNow + "&token=" + this.$SysCache.get('token'), obj).then(
				// 	res => {
				// 		if (res.code == 200) {
				// 			let cardata = [{
				// 				"iSKUId": this.iSKUId,
				// 				"iProductId": this.detail.id,
				// 				"onLineOffLine": 0,
				// 				"iQuantity": this.count,
				// 				"id": res.data
				// 			}]
				// 			let subdata = {
				// 				"items": cardata,
				// 				"realProductAttribute": 1,
				// 				"wayOfOrder": 1
				// 			}
				// 			this.$Request.post(this.$api.httpApi.car.GenerateOrderByShoppingCart + "&token=" + this
				// 				.$SysCache.get('token'),
				// 				subdata).then(resq => {
				// 				if (resq.code == 200) {
				// 					uni.navigateTo({
				// 						url: `/pages/order/order`
				// 					})

				// 				}
				// 			})

				// 		}
				// 	})
			},
			// 选配加入购物车
			CombinaSetAddCart(combinaActive) {
				console.log('选配加入购物车', this.combinationSalesStrategyLst)
				console.log(combinaActive)
				// 取出每个tab页的所选数据

				let xlType = this.goodsInfo.combinationSales[0].combinationSalesStrategy

				console.log('1111', this.CombinaActiveList)

				for (var s = 0; s < xlType.length; s++) {
					let totals = 0
					if (this.CombinaActiveList[s]) {
						this.CombinaActiveList[s].data.forEach(d => {
							totals += d.nums
						})
					}
					console.log(xlType[s].count, totals)
					if (xlType[s].count > totals) {
						this.$message.error(
							`${xlType[s].strategyItemName}必须选够${xlType[s].count}件,已选${totals}件`
						);
						return
					}
				}

				let datas = []
				this.CombinaActiveList.forEach(items => {

					items.data.forEach(item => {
						let temp = {
							"iSKUId": item.iskuId,
							"iQuantity": item.nums,
							"iProductNum": item.nums,
							"iProductId": item.productId,
							"lPackageId": this.goodsInfo.combinationSales[0].id,
							"iPackageNum": this.NumberData,
							"strategyId": item.strategyId,
							"bIsMain": item.bIsMain,
							"iShopId": item.iShopId || '',
							"onLineOffLine": 0,
							"fixedSale": 1,
							"lPackagePId": this.id,
							"lPackageSkuId": this.skuItem
						}
						datas.push(temp)
					})
				})


				let params = {
					token: localStorage.getItem('token'),
					data: [datas]
				}

				this.$api.good.addCarts(params).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.$message.success(res.message)
					} else {
						this.$message.error(res.message)
					}
				})






			},
			// // 锚点跳转
			// returnTop() {
			//   document.querySelector("#CombinaTionSales_box").scrollIntoView(true);
			// },
			// 搭配套餐计算价格
			SmDPPrice() {
				let CombinMainProducts = this.goodsInfo.fSalePrice // 主商品价格
				let WithGoods = this.CombinCheckList // 选择的搭配商品
				let total = 0 // 优惠价合计
				let PriceTotal = 0 // 未优惠合计
				if (WithGoods.length === 0) {
					console.log('搭配套餐合计11', CombinMainProducts, WithGoods)
					this.WithPackagePrice = ((total + CombinMainProducts) * 100) / 100
					this.WithPackagePrice2 = ((PriceTotal * 100) - (total * 100)) / 100
				} else {
					for (let i = 0; i < WithGoods.length; i++) {
						total += WithGoods[i].newPrice
						PriceTotal += WithGoods[i].price
					}
					console.log('搭配套餐合计22', total + CombinMainProducts)
					this.WithPackagePrice = ((total + CombinMainProducts) * 100) / 100
					this.WithPackagePrice2 = ((PriceTotal * 100) - (total * 100)) / 100
				}
			},
			getNewDetail(id, iShopId) {
				this.$router.push({
					path: "/fruit/detail_2",
					query: {
						id: id,
						iShopId: iShopId
					},
				})
				this.id = id
				this.iShopId = iShopId
				this.getGoodDetail()
			},
			// 获取商品详情
			getGoodDetail() {
				let params = {
					token: localStorage.getItem('token'),
					data: {
						id: this.id,
						iShopId: this.iShopId,
					}
				}
				this.$api.good.getGoodDetail(params).then(res => {
					console.log('获取商品详情', JSON.parse(JSON.stringify(res.data)), res.data.combinationSales)
					if (res.code == 200) {
						this.goodsInfo = res.data;
						// 设置默认选中sku
						this.$refs.CarouselRefs.getData(this.goodsInfo)
						this.$refs.DetailTypeRefs.getData(this.goodsInfo)
						this.imgSrc = res.data.fullDefaultImageUrl
						this.skuItem = this.goodsInfo.lsProductSkus[0].id; // sku id
						this.morenSalePrice = this.goodsInfo.lsProductSkus[0].fSalePrice;
						this.goodsInfo.cName = this.goodsInfo.lsProductSkus[0].cSKUName;
						this.goodsInfo.fSalePrice = this.goodsInfo.lsProductSkus[0].fSalePrice;
						this.GetlsProductSkus(this.skuItem) // 获取快递方式
						
						console.log('this.goodsInfo', this.goodsInfo)
						if (this.goodsInfo.preferentialMap !== undefined) {
							// 判断是否是整单促销
							if (this.goodsInfo.preferentialMap.pricepreferentialList.length > 0) {
								console.log('整单促销')
								this.SinglePromotionStatus = true
								this.SinglePromotionList = this.goodsInfo.preferentialMap
									.pricepreferentialList
							} else {
								console.log('不是整单促销')
								this.SinglePromotionStatus = false
							}
							// 判断是否是买赠活动giftpreferentialList
							if (this.goodsInfo.preferentialMap.giftpreferentialList.length > 0) {
								console.log('是买赠活动')
								this.GiftpreFerentialStatus = true
								this.GiftpreFerentialList = this.goodsInfo.preferentialMap
									.giftpreferentialList
							} else {
								console.log('不是买赠活动')
								this.GiftpreFerentialStatus = false
							}
							// 判断是否是选配商品
							if (this.goodsInfo.combinationSales === undefined) {
								console.log('不是选配商品')
								this.CombinaTionSales = false
							} else {
								console.log('是选配商品', res.data.combinationSales[0])
								this.CombinaTionSales = true
								this.combinationSalesStrategyLst = this.goodsInfo.combinationSales[0]
									.combinationSalesStrategy // tab每块默认数据
								res.data.combinationSales[0].combinationSalesStrategy.forEach((Element,
									index) => {
									Element.combinationsalesItem.forEach(item => {
										this.$set(item, 'nums', 1)
										this.$set(item, 'SelectionState', false)
										this.$set(item, 'NumsState', true)
										this.$set(item, 'TabIndex', String(Number(index) +
											1))
									})
								})
							}
						}
						this.getProductFavorites()
					} else {
						this.$message.error(res.message)
					}
				})
			},
			// 获取个人收藏列表
			getProductFavorites() {
				let params = {
					token: localStorage.getItem('token'),
					data: {
						classId: '',
						productName: '',
						tagId: '',
						currentPage: 1,
						pagesize: 10000,
					}
				}
				this.$api.person.getProductFavorites(params).then(res => {
					console.log('获取个人收藏列表', res.data)
					if(res.code == 200){
						this.FavorList = res.data.pager.data
						this.SearchFavorites(this.FavorList, this.goodsInfo)
					}
					
				})
			},
			// 查询该商品是否被关注
			/**
			 * FavorList 关注列表
			 * goodsInfo 商品信息
			 */
			SearchFavorites(FavorList, goodsInfo) {
				console.log('查询该商品是否被关注', FavorList, JSON.parse(JSON.stringify(goodsInfo)))
				let results = FavorList.map(a => a.pid).indexOf(goodsInfo.id)
				if (results === -1) { // 没有收藏/关注
					this.goodsInfo.isChecked = false
				} else { // 已收藏/关注
					this.goodsInfo.isChecked = true
				}
			},
			//输入数量
			numsChange() {
				console.log(this.nums)
				if (this.nums > this.goodsInfo.lInventoryCount) {
					this.$message.error('商品数量不能超过最多库存')
					this.nums = this.goodsInfo.lInventoryCount
				} else {
					this.nums = 1;
				}
			},
			//添加到购物车
			addCart() {
				// items: "[{"iSKUId":1929996483858688,"iProductId":1929996481827072,"onLineOffLine":0,"iQuantity":1,"dlyType":"EMS","iShopId":1928870577033472}]"
				if(this.goodsInfo.enableDeposit){
					return
				}
				let params = {
					token: localStorage.getItem('token'),
					data: [{
						iSKUId: this.skuItem,
						iProductId: this.id,
						onLineOffLine: 0,
						iQuantity: this.nums,
						dlyType: this.getEMSString, // 选配方式
						iShopId: this.iShopId,
					}]
				}
				console.log('params', params)
				this.$api.good.addCarts(params).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.$message.success(res.message)
					} else {
						this.$message.error(res.message)
					}
				})
			},
			// 搭配套餐加入购物车
			CombinAddCart(lPackageId) {
				console.log('搭配套餐加入购物车', this.CombinGetGoodDetailList)
				if (this.CombinGetGoodDetailList.length === 0) {
					this.$message.error('请至少选择一个商品！')
				} else {
					let ParamsArrData = [{
						iSKUId: this.skuItem,
						iProductId: this.id,
						onLineOffLine: 0,
						iQuantity: 1,
						// dlyType: "EMS",
						lPackageId: lPackageId,
						iPackageNum: 1,
						bIsMain: true,
						iShopId: this.iShopId || null
					}]
					this.CombinGetGoodDetailList.forEach(Element => {
						ParamsArrData.push({
							iSKUId: Element.lsProductSkus[0].id,
							iProductId: Element.id,
							onLineOffLine: 0,
							iQuantity: 1,
							lPackageId: lPackageId,
							// dlyType: "EMS",
							iPackageNum: 1,
							bIsMain: Element.bIsMain,
							iShopId: this.iShopId || null
						})
						console.log('ParamsArrData', ParamsArrData)
					})
					console.log('ParamsArrData222222222222222', ParamsArrData)
					let addcartdata = {
						token: localStorage.getItem('token'),
						data: [ParamsArrData]
					}
					console.log('搭配套餐提交', addcartdata)
					this.$api.good.addCarts(addcartdata).then(res => {
						console.log('搭配套餐加入购物车', res)
						if (res.code == 200) {
							this.$message.success(res.message)
						} else {
							this.$message.error(res.message)
						}
					})
				}
			},
			// 固定套餐加入购物车前数据处理
			FixedAddCart(FixedAddCart) {
				console.log('固定套餐加入购物车', FixedAddCart, this.getEMSString)
				let FixedParamsArrData = []
				FixedAddCart.forEach(Element => {
					FixedParamsArrData.push({
						"iSKUId": Element.GoodShop.lsProductSkus[0].id,
						"iProductId": Element.GoodShop.id,
						"onLineOffLine": 0,
						"iQuantity": 1,
						"dlyType": this.getEMSString,
						"lPackageId": Element.combinActivityId,
						"iPackageNum": 1,
						"fixedSale": 1,
						"iShopId": Element.iShopId || null
					})
				})
				console.log('FixedParamsArrData', FixedParamsArrData)
				let FixAddCartData = {
					token: localStorage.getItem('token'),
					data: [FixedParamsArrData]
				}
				this.$api.good.addCarts(FixAddCartData).then(res => {
					console.log('固定套餐加入购物车', res)
					if (res.code == 200) {
						this.$message.success(res.message)
					} else {
						this.$message.error(res.message)
					}
				})
			},
			// 关注
			focus(goodsInfo) {
				console.log('关注', goodsInfo)
				if (this.goodsInfo.isChecked) {
					let del = {
						token: localStorage.getItem('token'),
						data: {
							productId: goodsInfo.id
						}
					}
					this.$api.good.delFavoritesByProductId(del).then(res => {
						if (res.code == 200) {
							this.goodsInfo.isChecked = false
							this.getGoodDetail()
							this.$message.success(res.message);
						} else {
							this.$message.error(res.message);
						}
					});
				} else {
					let params = {
						token: localStorage.getItem('token'),
						data: {
							iShopIds: goodsInfo.iShopId,
							ids: goodsInfo.id
						}
					}
					this.$api.good.addToCollect(params).then(res => {
						if (res.code == 200) {
							this.goodsInfo.isChecked = true
							this.getGoodDetail()
							this.isVisiable = true;
							this.$message.success(res.message);
						} else {
							this.$message.error(res.message);
						}
					})
				}
			},
			//分享
			share() {
				this.isVisiableShare = true;
				console.log(this.isVisiableShare)
			},
			//选择sku
			checkSku(child, parent) {
				this.goodsInfo.lsProductSkus.forEach(items => {
					if (items.cSpecIds == child.id) {
						this.skuItem = items;
						this.goodsInfo.cName = items.cSKUName;
						this.goodsInfo.fSalePrice = items.fSalePrice;
						if (this.goodsInfo.productPreferential) {
							this.goodsInfo.productPreferential.dNewPrice = items.fSalePrice;
						}
						this.GetlsProductSkus(this.skuItem) // 获取快递方式
					}

				});
				console.log(parent)
				console.log(child)
				parent.forEach(item => {
					item.isExtend = false;
				})
				this.$set(child, 'isExtend', true);
			},
			//数量
			addNums() {
				console.log(this.goodsInfo.lInventoryCount)
				if (this.goodsInfo.iInventoryQuantity == false) {
					this.nums++;
				} else {
					if (this.nums < this.goodsInfo.lInventoryCount) {
						this.nums++;
					} else {
						this.$message.error('商品数量不能超过最多库存')
					}
				}
			},
			timeFormat(param) {
				return param < 10 ? '0' + param : param;
			},
			countDown(it) {
				var interval = setInterval(() => {
					// 获取当前时间，同时得到活动结束时间数组
					let newTime = new Date().getTime(); // 对结束时间进行处理渲染到页面
					let endTime = new Date(it).getTime();
					let obj = null; // 如果活动未结束，对时间进行处理
					if (endTime - newTime > 0) {
						let time = (endTime - newTime) / 1000; // 获取天、时、分、秒
						let day = parseInt(time / (60 * 60 * 24));
						let hou = parseInt((time % (60 * 60 * 24)) / 3600);
						let min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
						let sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
						obj = {
							day: this.timeFormat(day),
							hou: this.timeFormat(hou),
							min: this.timeFormat(min),
							sec: this.timeFormat(sec)
						};
					} else {
						// 活动已结束，全部设置为'00'
						obj = {
							day: '00',
							hou: '00',
							min: '00',
							sec: '00'
						};
						clearInterval(interval);
					}
					this.countDownList = obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒';
				}, 1000);
			},
			reduceNums() {
				if (this.nums <= 1) {
					this.nums = 1;
				} else {
					this.nums--;
				}
			},
			back(text) {
				this.$router.go(text); //返回上一层
			},
			//小图片鼠标悬浮
			selectedImg(pic, index) {
				this.imgSrc = pic.cFolder;
				this.selectedImgIndex = index;
			},
			changeVisiabled(e) {
				this.isVisiable = e;
			},
			changeVisiabledShare(e) {
				this.isVisiableShare = e;
			},
			//点击向右滑动
			leftScroll() {
				if (this.selectedImgIndex > 0) {
					this.selectedImgIndex--
					this.imgSrc = this.goodsInfo.lsAlbums[this.selectedImgIndex].cFolder
					this.$nextTick(function() {
						this.letfs += 8.81;
						this.left = this.letfs + 'rem';
					})
				}
			},
			rightScroll() {
				if (this.selectedImgIndex < this.goodsInfo.lsAlbums.length - 1) {
					this.selectedImgIndex++
					this.imgSrc = this.goodsInfo.lsAlbums[this.selectedImgIndex].cFolder
					this.$nextTick(function() {
						this.letfs -= 8.81;
						this.left = this.letfs + 'rem';
					})
				}
			},
			nowBuy() {
				let datas = {
					iSKUId: this.skuItem,
					iProductId: this.id,
					onLineOffLine: 0,
					iQuantity: this.nums,
					dlyType: this.getEMSString,
					iShopId: this.iShopId,
				}
				let obj = {
					item: datas
				}
				let params = {
					token: localStorage.getItem("token"),
					data: obj
				}
				this.$api.good.orderNow(params).then(res => {
					console.log(res)
					if (res.code == 200) {
						let cardata = [{
							iSKUId: this.skuItem,
							iProductId: this.id,
							onLineOffLine: 0,
							iQuantity: this.nums,
							dlyType: this.getEMSString,
							id: res.data
						}]
						let subdata = {
							items: cardata,
							realProductAttribute: 1,
							wayOfOrder: 1
						}
						let par = {
							token: localStorage.getItem("token"),
							data: subdata
						}
						this.$api.good.GenerateOrderByShoppingCarts(par).then(resq => {
							if (resq.code == 200) {
								this.$router.push({
									path: '/confirm_order'
								})
							} else {
								this.$message.error(resq.message)
							}
						})

					} else {
						this.$message.error(res.message)
					}
				})

			},
			link() {
				var test = encodeURIComponent(window.location.href);
				var name = encodeURIComponent(this.goodsInfo.cName);
				var image = encodeURIComponent(this.goodsInfo.fullDefaultImageUrl)
				var money = encodeURIComponent(this.goodsInfo.fSalePrice)
				window.open(
					'https://yongyou-c7ca5f-8498.udesk.cn/im_client/?web_plugin_id=125391?product_send=true&product_title=' +
					name + '&product_url=' + test + '&product_image=' + image + '&product_价格=￥' + money)
			},
			onCopy: function(e) {
				console.log(e)
				this.$message.success("地址复制成功!")
			},
			onError: function(e) {
				console.log(e)
				this.$message.error("地址复制失败!")
			},
			// 获取搭配套餐
			GetCombinSaleListListData(productId, iShopId) {
				let params = {
					token: localStorage.getItem('token'),
					iShopId: iShopId,
					data: {
						param: {
							productId: productId,
							areaId: null,
						}
					}
				}
				this.$api.good.GetCombinSaleListList(params).then(res => {
					console.log('获取搭配套餐', res)
					// 如果res。data。count大于1则是搭配销售商品
					if (res.data.count > 0) {
						this.WithPackageStatus = true
						this.WithPackageList = res.data.combinSales // 搭配套餐 
					} else {
						this.WithPackageStatus = false
						return false
					}
				})
			},
			// 获取固定套餐
			GetFixedSetMenuListData(productId, iShopId) {
				let params = {
					token: localStorage.getItem('token'),
					iShopId: iShopId,
					data: {
						param: {
							productId: productId,
							areaId: null,
						}
					}
				}
				this.$api.good.GetFixedSetMenuListApi(params).then(res => {
					// 如果res。data。count大于1则是搭配销售商品
					if (res.data.count > 0) {
						this.FixedSetMenuStatus = true
						this.FixedSetMenuList = res.data.fixedsetmenu // 固定套餐
						console.log('获取固定套餐', res.data.fixedsetmenu)
						res.data.fixedsetmenu.forEach(Element => {
							Element.combinProducts.forEach(item => {
								let params = {
									token: localStorage.getItem('token'),
									data: {
										id: item.productId,
										iShopId: item.iShopId,
									}
								}
								this.$api.good.getGoodDetail(params).then(res => {
									item.GoodShop = res.data
									// this.$set(item , 'GoodShop', res.data)
								})
							})
						})
						// 计算固定套餐价格
						this.SmGDPrice(this.FixedSetMenuList, this.activeName)
					} else {
						this.FixedSetMenuStatus = false
						return false
					}
				})
			},
			// 选配方式
			SkuTabClick(index, data) {
				console.log('选配方式', index, data)
				this.SkuTabIndex = index
				this.goodsInfo.fSalePrice = data.fSalePrice
				this.skuItem = data.id // 规格id
				this.GetlsProductSkus(this.skuItem) // 获取快递方式 
			},
			// 获取商品配送方式
			GetlsProductSkus(skuItem) {
				let params = {
					token: localStorage.getItem("token"),
					data: {
						iShopId: this.iShopId,
						SKUId: skuItem
					},
				};
				this.$api.good.getEMSList(params).then((res) => {
					console.log("获取商品配送方式", res);
					if (res.data.sku.length > 0) {
						// this.$set(Element,'oDeliverTypeList', res.data.sku)
						this.getEMSString = res.data.sku[0].id
					} else {
						// this.$set(Element,'oDeliverTypeList', res.data.Store)
						this.getEMSString = res.data.Store[0].id
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.home {
		background-color: #fff;

		.container {
			padding: 0 16.19rem;
			margin: 7rem 0 0;
			display: flex;
			flex-direction: column;

			.fruitInfo {
				display: flex;
				flex-direction: row;
				padding-top: 2rem;
				justify-content: space-between;

				.leftBox {
					width: 37.75rem;
					height: auto;
					display: flex;
					flex-direction: column;

					.bigImg {
						margin: 0 0 1.31rem;
						width: 37.75rem;
						height: 37.75rem;
						background: rgba(0, 0, 0, 0.1);
						display: block;
						object-fit: contain;
						display: flex;
						justify-content: center;
						align-items: center;

						img {
							width: 27.88rem;
							height: 27.88rem;
						}
					}

					.smallImg {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						>img {
							background: transparent;
							width: 1.5rem;
							height: 3.25rem;
							cursor: pointer;
						}

						.smBox {
							position: relative;
							width: 27.87rem;
							height: 8.25rem;
							overflow: hidden;

							.smImgList {
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								position: absolute;
								left: 0;
								top: 0;
								height: 8.25rem;
								width: 100%;
								transition: all 0.2s ease-in;

								li {
									cursor: pointer;
									height: 7.25rem;
									width: 7.25rem;
									margin-right: 1.56rem;
									// padding: 1rem;
									border: 0.06rem solid #fff;
									align-items: center;
									text-align: center;
									background: rgba(0, 0, 0, 0.1);
									position: relative;

									img {
										width: 7.25rem;
										height: 7.25rem;
									}

									&.active {
										border: 0.06rem solid #32b3a1;
									}
								}
							}
						}
					}
				}

				.rightBox {
					width: 42.06rem;
					height: auto;

					.toper {
						display: flex;
						flex-direction: row;
						justify-content: space-between;

						.titles {
							font-size: 1.13rem;
							color: #333;
							line-height: 1.72rem;
							font-weight: bold;
							width: 24.81rem;
						}

						.opreate {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;

							>div {
								cursor: pointer;
								font-size: 0.88rem;
								color: #666;
								margin-right: 1.88rem;
								user-select: none;

								&:last-child {
									margin-right: 0;
								}

								&:hover {
									color: #32b3a1;
								}

								img {
									vertical-align: middle;
									width: 1rem;
									margin-right: 0.5rem;
								}
							}
						}
					}

					.priceBox_Bg {
						background-color: #fb4e7d;
						margin: 2.19rem 0 0;
						padding: 1.31rem;
						display: flex;
						flex-direction: column;
						color: #fff;

						.top {
							display: flex;
							justify-content: space-between;
							width: 100%;
							height: 2.5rem;
							align-items: center;

							.price {
								font-size: 1.63rem;

								span {
									font-size: 1.28rem;
								}

								.fMarkPrice {
									font-size: 1rem;
									text-decoration: line-through;
								}
								
							}

							.lInventoryCount {
								font-size: 1rem;
							}

							.socre {
								font-size: 0.88rem;
								padding-left: 0.94rem;
							}
						}

						.body {
							display: flex;
							height: 2.5rem;
							align-items: center;
							justify-content: space-between;

							.active_titem {
								display: flex;
								height: 2.5rem;
								align-items: center;
							}
						}
					}

					.priceBox {
						background-color: #f6f6f6;
						justify-content: space-between;
						display: flex;
						flex-direction: row;
						margin: 2.19rem 0 0;
						padding: 1.31rem;

						.top {
							display: flex;
							justify-content: space-between;
							width: 100%;
							height: 2.5rem;
							align-items: center;

							.price {
								font-size: 1.63rem;
								color: #f0406f;

								span {
									font-size: 1.28rem;
									color: #f0406f;
								}

								.fMarkPrice {
									font-size: 1rem;
									color: #d0d0d0;
									text-decoration: line-through;
								}
								.moneybox{
									margin-left: 3rem;
									color: #333;
									font-size: 1rem;
									.orderMoney{
										font-size: 1rem;
									}
								}
							}

							.lInventoryCount {
								font-size: 1rem;
								color: #f0406f;
							}

							.socre {
								font-size: 0.88rem;
								color: #666;
								padding-left: 0.94rem;
							}
						}
					}

					.huangou {
						display: flex;
						flex-direction: row;
						margin-top: 1rem;
						align-items: center;
						font-size: 0.88rem;
						color: #999;

						.btns {
							background: #33b39f;
							color: #fff;
							font-size: 0.88rem;
							margin-right: 0.5rem;
							padding: 0.66rem 1.31rem;
						}

						span {
							cursor: pointer;

							&:hover {
								color: #000;
							}
						}
					}

					.priceBoxs {
						width: 42.06rem;
						height: 8.44rem;
						background-color: #f6f6f6;
						margin: 2.19rem 0 0;
						display: flex;
						flex-direction: column;

						// line-height: 4.44rem;
						.prices {
							background-color: #f04070;
							padding: 0.88rem 0.94rem;
							font-size: 1.13rem;
							color: #fff;
							display: flex;
							flex-direction: row;
							justify-content: space-between;

							.djs {
								font-size: 0.88rem;
								color: #fff;
							}

							// span {
							// 	font-size: 1.28rem;
							// 	color: #f0406f;
							// 	padding-left: 1.31rem;
							// }
						}

						.sales {
							font-size: 1.63rem;
							color: #f0406f;
							line-height: 6rem;
							padding-left: 0.94rem;

							span {
								font-size: 1.28rem;
							}
						}
					}

					.hr {
						width: 42.06rem;
						height: 0.06rem;
						background: rgba(216, 216, 216, 1);
						margin: 1.25rem 0;
					}

					.gem {
						font-size: 0.88rem;
						margin-bottom: 1.25rem;
						display: flex;
						flex-direction: row;
						align-items: flex-start;
						justify-content: flex-start;

						&>div {
							width: 2.81rem;
							padding-right: 1rem;
							line-height: 2.39rem;
							height: 2.39rem;
							white-space: nowrap;
							overflow: hidden;

							text-overflow: ellipsis;
						}

						ul {
							display: block;
							overflow: hidden;
							width: 33.5rem;

							li {
								&:nth-child(4n) {
									margin-right: 0;
								}

								float: left;
								margin-right: 0.69rem;
								margin-bottom: 0.69rem;
								text-align: center;
								line-height: 2.39rem;
								width: 7.81rem;
								height: 2.39rem;
								cursor: pointer;
								color: #666;
								background: rgba(255, 255, 255, 1);
								border: 0.06px solid rgba(205, 205, 205, 1);

								&.active {
									background: rgba(50, 179, 161, 1);
									color: #fff;
								}
							}
						}
					}

					.nums {
						font-size: 0.88rem;
						display: flex;
						flex-direction: row;
						margin-bottom: 1rem;

						.tips {
							width: 1.81rem;
							padding-right: 1rem;
							line-height: 1.75rem;
							height: 1.75rem;
						}

						.numsGroup {
							color: #666;

							width: 12.13rem;
							height: 1.75rem;
							line-height: 1.75rem;
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							user-select: none;

							.rbtns {
								border: 0.06rem solid rgba(210, 210, 210, 1);
								padding: 0 1rem;
								cursor: pointer;
							}

							.lbtns {
								border: 0.06rem solid rgba(210, 210, 210, 1);
								padding: 0 1rem;
								cursor: pointer;
							}

							.numbers {
								border-right: none;
								border-left: none;
								border-top: 0.06rem solid rgba(210, 210, 210, 1);
								border-bottom: 0.06rem solid rgba(210, 210, 210, 1);
								width: 7.2rem;
								text-align: center;
								color: #333;
								font-size: 1rem;
								outline: none;
							}
						}
					}

					.promotion_box {
						.un_anbox {
							display: flex;
							justify-content: space-between;
							font-size: 0.88rem;

							.title {
								color: #000;
								font-weight: 400;
								display: flex;
								height: 2rem;
								align-items: center;
							}

							.un_anbody {
								display: flex;
								justify-content: left;
								flex-direction: column;
								width: 35.7rem;

								.un_anbody_item {
									display: flex;
									height: 2rem;
									align-items: center;
									margin-bottom: .5em;
									color: #999999;

									.active_span {
										border: 1px solid #f0406f;
										padding: .4rem 1rem;
										margin-right: 1rem;
										border-radius: .6rem;
										color: #f0406f;
									}

									.active_span_sku {
										border: 1px solid #dadfe5;
										padding: .4rem 1rem;
										margin-right: 1rem;
										border-radius: .6rem;
										color: #666;
										cursor: pointer;
									}

									.skuactive {
										border: 1px solid #f0406f;
										color: #f0406f;
									}

									.active_span2 {
										width: 6rem;
									}

									.active_title {
										margin-right: 1rem;
									}
								}

								.an_anbody_item {
									display: flex;
									height: 2rem;
									flex-direction: column;
									margin-bottom: .5em;
									color: #999999;

									.top {
										display: flex;
										height: 2rem;
										align-items: center;
										margin-bottom: .5em;

										.active_span {
											border: 1px solid #f0406f;
											padding: .4rem 1rem;
											margin-right: 1.5rem;
											border-radius: .6rem;
											color: #f0406f;
										}

										.active_title {
											margin-right: 1rem;
											display: flex;
											height: 2rem;
											align-items: center;
										}
									}

									.list {
										.list_itme {
											.item {
												display: flex;
												height: 2rem;
												align-items: center;

												.zanw {
													width: 6.5rem;
												}
											}
										}
									}
								}
							}

							.an_butotn {
								color: #f0406f;
								cursor: pointer;
								display: flex;
								height: 2rem;
								align-items: center;
							}
						}

						.progress_box {
							margin: 1rem 0;
						}
					}

					.btnGroup {
						margin-top: 11.8rem;
						width: 29.19rem;

						>div {
							width: 29.19rem;
							cursor: pointer;
							font-size: 1.13rem;
							text-align: center;
							line-height: 3.38rem;
							opacity: 1;

							&.joinCart {
								border: 0.06px solid rgba(4, 4, 4, 1);
								background-color: #fff;
								color: #231815;
								margin-bottom: 1.25rem;
							}
							&.gray {
								border: 0.06px solid #999;
								background-color: #999;
								color: #fff;
								margin-bottom: 1.25rem;
								cursor: no-drop;
							}

							&.buy {
								border: 0.06px solid rgba(4, 4, 4, 1);
								color: #fff;
								background-color: #000000;

								a {
									color: #fff;
								}
							}

							&:hover {
								opacity: 0.75;
							}
							&.gray:hover {
								opacity: 1;
							}
						}
					}

					.goosTips {
						padding-top: 3.38rem;
						color: #999999;
						font-size: 0.88rem;

						>div {
							padding-bottom: 0.69rem;
						}
					}
				}
			}
		}
	}

	.shop {
		position: fixed;
		right: 3.06rem;
		top: 50%;
		width: 6.25rem;
		height: 2.19rem;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1rem;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #000000;
		border: 1px solid #7e8c8d;
		cursor: pointer;

		img {
			width: 1.19rem;
			object-fit: contain;
			margin-right: 0.25rem;
		}
	}

	#WithPackage_box {
		.topp_box {
			background: #f9fafd;
			display: flex;
			height: 3rem;
			align-items: center;
			padding: 0 .8rem;
			color: #f0406f;
			border: 1px solid #e6e6e6;
			margin-bottom: 1rem;
		}

		.topp_body {
			padding: 1rem .8rem;
			border-bottom: 1px solid #e6e6e6;
			border-right: 1px solid #e6e6e6;
			border-left: 1px solid #e6e6e6;

			.active_name {
				display: flex;
				height: 2.5rem;
				align-items: center;
				margin-bottom: 1rem;

				span {
					display: flex;
					padding: .8rem 1rem;
					border: .06px solid #040404;
					color: #fff;
					background-color: #000;
				}
			}

			.list_box {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 1rem;

				.detail_good_box {
					display: flex;
					flex-direction: column;

					.el-checkbox-group {
						display: flex;
					}

					.detail_good_box_img {
						width: 10rem;
						height: 10rem;
						cursor: pointer;
					}

					.detail_good_box_name {
						width: 10rem;
						align-items: center;
						height: 3rem;
						line-height: 3rem;
						text-align: center;
						justify-content: center;
						font-size: .9rem;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.detail_good_box_price {
						width: 10rem;
						display: flex;
						align-items: center;
						height: 1rem;
						line-height: 1rem;
						text-align: center;
						justify-content: center;
						font-size: .9rem;
						color: #f0406f;

						span {
							margin-left: 1rem;
						}
					}
				}

				.checkbox-group {
					display: flex;
				}

				.topp_body_item {
					display: flex;

					.topp_body_item_body {
						display: flex;
						flex-direction: column;

						.topp_body_img {
							width: 10rem;
							height: 10rem;
							cursor: pointer;
						}

						.topp_body_name {
							width: 10rem;
							align-items: center;
							height: 3rem;
							line-height: 3rem;
							text-align: center;
							justify-content: center;
							font-size: .9rem;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.topp_body_price {
							width: 10rem;
							display: flex;
							align-items: center;
							height: 1rem;
							line-height: 1rem;
							text-align: center;
							justify-content: center;
							font-size: .9rem;
							color: #f0406f;

							span {
								margin-left: 1rem;
							}
						}
					}
				}
			}

			.plus_sign {
				display: flex;
				height: 10rem;
				align-items: center;
				font-size: 3rem;
				width: 5rem;
				justify-content: center;
			}

			.topp_body_item_settlement {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 10rem;
				height: 10rem;
				align-items: center;
				
				.topp_body_item_settlement_1 {
					display: flex;
					height: 2.5rem;
					align-items: center;
					font-size: 1rem;
					color: #999;
				}

				.topp_body_item_settlement_2 {
					display: flex;
					height: 2.5rem;
					align-items: center;
					font-size: 1rem;
					color: #fb4e7d;
				}

				.topp_body_item_settlement_3 {
					display: flex;
					height: 2.5rem;
					align-items: center;
					font-size: 1rem;

					span {
						cursor: pointer;
						background: #fb4e7d;
						border-radius: 1rem;
						color: #fff;
						padding: .4rem 1rem;
					}
				}

				.topp_body_item_settlement_4 {
					display: flex;
					height: 2.5rem;
					align-items: center;
					font-size: 1rem;
					color: #fff;

					span {
						background: #a9a194;
						padding: .2rem 1rem;
					}
				}
			}
		}
	}
	.op-button{
		position: absolute;
		right: 2rem;
		bottom: 1rem;
		width: 12rem;
		.topp_body_item_settlement_3 {
			display: flex;
			height: 4rem !important;
			align-items: center;
			font-size: 1.2rem !important;
		
			span {
				cursor: pointer;
				background: #fb4e7d;
				border-radius: 1.5rem !important;
				color: #fff;
				padding: .8rem 1.5rem !important;
				width: 100%!important;
			}
		}
	}
	#CombinaTionSales_box {
		.topp_box {
			background: #f9fafd;
			display: flex;
			height: 3rem;
			align-items: center;
			padding: 0 .8rem;
			color: #f0406f;
			border: 1px solid #e6e6e6;
			margin-bottom: 1rem;
		}

		.topp_body {
			padding: 1rem .8rem;
			border-bottom: 1px solid #e6e6e6;
			border-right: 1px solid #e6e6e6;
			border-left: 1px solid #e6e6e6;

			.active_name {
				display: flex;
				height: 2.5rem;
				align-items: center;
				margin-bottom: 1rem;

				span {
					display: flex;
					padding: .8rem 1rem;
					border: .06px solid #040404;
					color: #fff;
					background-color: #000;
				}
			}

			.list_box {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 1rem;

				.detail_good_box {
					display: flex;
					flex-direction: column;

					.el-checkbox-group {
						display: flex;
					}

					.detail_good_box_img {
						width: 10rem;
						height: 10rem;
						cursor: pointer;
					}

					.detail_good_box_name {
						width: 10rem;
						align-items: center;
						height: 2rem;
						line-height: 2rem;
						text-align: center;
						justify-content: center;
						font-size: .9rem;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.detail_good_box_price {
						width: 10rem;
						display: flex;
						align-items: center;
						height: 2rem;
						line-height: 2rem;
						text-align: center;
						justify-content: center;
						font-size: .9rem;
						color: #f0406f;

						span {
							margin-left: 1rem;
						}
					}
				}

				.checkbox-group {
					display: flex;
				}

				.topp_body_item {
					display: flex;

					.topp_body_item_body {
						display: flex;
						flex-direction: column;

						.topp_body_img {
							width: 10rem;
							height: 10rem;
							cursor: pointer;
						}

						.topp_body_name {
							width: 10rem;
							align-items: center;
							height: 2rem;
							line-height: 3rem;
							text-align: center;
							justify-content: center;
							font-size: .9rem;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.topp_body_price {
							width: 10rem;
							display: flex;
							align-items: center;
							height: 2rem;
							line-height: 1rem;
							text-align: center;
							justify-content: center;
							font-size: .9rem;
							color: #f0406f;

							span {
								margin-left: 1rem;
							}
						}

						.topp_body_num {
							width: 10rem;
							display: flex;
							align-items: center;
							height: 2rem;
							line-height: 1rem;
							text-align: center;
							justify-content: center;
							font-size: .9rem;
							color: #f0406f;
						}
					}
				}
			}

			.plus_sign {
				display: flex;
				height: 10rem;
				align-items: center;
				font-size: 3rem;
				width: 5rem;
				justify-content: center;
			}

			.topp_body_item_settlement {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 10rem;
				height: 10rem;
				align-items: center;

				.topp_body_item_settlement_1 {
					display: flex;
					height: 2.5rem;
					align-items: center;
					font-size: 1rem;
					color: #999;
				}

				.topp_body_item_settlement_2 {
					display: flex;
					height: 2.5rem;
					align-items: center;
					font-size: 1rem;
					color: #fb4e7d;
				}

				.topp_body_item_settlement_3 {
					display: flex;
					height: 2.5rem;
					align-items: center;
					font-size: 1rem;

					span {
						cursor: pointer;
						background: #fb4e7d;
						border-radius: 1rem;
						color: #fff;
						padding: .4rem 1rem;
					}
				}

				.topp_body_item_settlement_4 {
					display: flex;
					height: 2.5rem;
					align-items: center;
					font-size: 1rem;
					color: #fff;

					span {
						background: #a9a194;
						padding: .2rem 1rem;
					}
				}
			}
		}

		// 已选商品列表
		.activ_leist_box {
			border-left: 1px solid #e6e6e6;
			border-right: 1px solid #e6e6e6;
			border-bottom: 1px solid #e6e6e6;
			padding: 1rem 0.8rem;
			display: flex;
			flex-wrap: wrap;

			.detail_good_box {
				display: flex;
				flex-direction: column;

				.el-checkbox-group {
					display: flex;
				}

				.detail_good_box_img {
					width: 10rem;
					height: 10rem;
					cursor: pointer;
				}

				.detail_good_box_name {
					width: 10rem;
					align-items: center;
					height: 3rem;
					line-height: 3rem;
					text-align: center;
					justify-content: center;
					font-size: .9rem;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.detail_good_box_price {
					width: 10rem;
					display: flex;
					align-items: center;
					height: 1rem;
					line-height: 1rem;
					text-align: center;
					justify-content: center;
					font-size: .9rem;
					color: #f0406f;

					span {
						margin-left: 1rem;
					}
				}
			}

			.consetrbox {
				display: flex;
				margin-bottom: 2rem;
			}

			.topp_body_item {
				display: flex;

				.topp_body_item_body {
					display: flex;
					flex-direction: column;

					.topp_body_img {
						width: 10rem;
						height: 10rem;
						cursor: pointer;
					}

					.topp_body_name {
						width: 10rem;
						align-items: center;
						height: 3rem;
						line-height: 3rem;
						text-align: center;
						justify-content: center;
						font-size: .9rem;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.topp_body_price {
						width: 10rem;
						display: flex;
						align-items: center;
						height: 1rem;
						line-height: 1rem;
						text-align: center;
						justify-content: center;
						font-size: .9rem;
						color: #f0406f;

						span {
							margin-left: 1rem;
						}
					}
				}
			}

			.plus_sign {
				display: flex;
				height: 10rem;
				align-items: center;
				font-size: 3rem;
				width: 8rem;
				justify-content: center;
			}

			.topp_body_item_settlement {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 10rem;
				height: 10rem;
				align-items: center;

				.topp_body_item_settlement_1 {
					display: flex;
					height: 2.5rem;
					align-items: center;
					font-size: 1rem;
					color: #999;
				}

				.topp_body_item_settlement_2 {
					display: flex;
					height: 2.5rem;
					align-items: center;
					font-size: 1rem;
					color: #fb4e7d;
				}

				.topp_body_item_settlement_3 {
					display: flex;
					height: 2.5rem;
					align-items: center;
					font-size: 1rem;

					span {
						width: 5rem;
						text-align: center;
						cursor: pointer;
						background: #fb4e7d;
						border-radius: 1rem;
						color: #fff;
						padding: .4rem 1rem;
					}
				}

				.topp_body_item_settlement_4 {
					display: flex;
					height: 2.5rem;
					align-items: center;
					font-size: 1rem;
					color: #fff;

					span {
						background: #a9a194;
						padding: .2rem 1rem;
					}
				}
			}
		}
	}
</style>
<style>
	.el-collapse {
		border-top: 1px solid #d8d8d8;
		border-bottom: 1px solid #d8d8d8;
	}

	.el-progress-bar {
		width: 35.7rem;
	}

	.topp_body_price .el-checkbox__label {
		color: #f0406f;
	}

	.el-checkbox__input.is-checked+.el-checkbox__label {
		color: #f0406f;
	}

	.el-checkbox__input.is-checked .el-checkbox__inner,
	.el-checkbox__input.is-indeterminate .el-checkbox__inner {
		background-color: #f0406f;
		border-color: #f0406f;
	}

	.el-checkbox__inner:hover {
		border-color: #f0406f;
	}

	.el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #f0406f;
	}

	.el-tabs__item:hover {
		color: #f0406f;
	}

	.el-tabs__item.is-active {
		color: #f0406f;
	}

	.el-tabs__header {
		margin-bottom: 0;
	}
</style>
